<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Konstruct</title>
</head>
<body>
    
    <header class="header">
        <div class="container">
            <div class="header__wrapper">
                <img src="img/company-logo-white.png" alt="" class="white-logo header__logo">
                <h1 class="header__h1 text__uppercase">Partner with konstruct</h1>
                <p class="header__p">An award-winning construction management firm</p>
                <h6 class="header__h6 text__uppercase">Scroll down</h6>
            </div>
        </div>
    </header>

    <section class="menu">
        <div class="container">
            <div class="menu__wrapper">
                <img src="img/company-logo-black.png" alt="" class="black-logo menu__logo">
                <div class="menu__flex-container">
                    <div class="menu__flex-element text__uppercase menu__home">Home</div>
                    <div class="menu__flex-element text__uppercase menu__about">About</div>
                    <div class="menu__flex-element text__uppercase menu__services">Services</div>
                    <div class="menu__flex-element text__uppercase menu__work">Work</div>
                    <div class="menu__flex-element text__uppercase menu__contacts">Contact</div>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <h4 class="about__h4 text__uppercase">Our story</h4>
            <div class="about__line"></div>
            <div class="about__wrapper">
                <div class="about__text-container">
                    <p class="about__main-text">Founded in 2011 by John Mathew Smith, 
                    <span class="color-turquoise">Konstruct</span> has become the number one construction management firm</p>
                    <p class="about__side-text">Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                    dolore magna aliquam erat. Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                    dolore magna aliquam erat.</p>
                </div>
                <div class="about__grid-container">
                    <div class="about__grid-element">
                        <div class="about__logo about__plan">
                            <h3 class="about__h3 text__uppercase">We <br> plan</h3>
                        </div>
                    </div>
                    <div class="about__grid-element">
                        <div class="about__logo about__manage">
                            <h3 class="about__h3 text__uppercase">We <br> manage</h3>
                        </div>
                    </div>
                    <div class="about__grid-element">
                        <div class="about__logo about__build">
                            <h3 class="about__h3 text__uppercase">We <br> build</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services">
        <div class="container">
            <div class="services__wrapper">
                <div class="services__text-flex">
                    <h4 class="about__h4 text__uppercase services__h4">Our capabilities</h4>
                    <p class="services__text">Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                    dolore magna aliquam erat.</p>
                    <div class="services__btn-wrapper"><button class="services__btn text__uppercase">All services</button></div>
                </div>
                <div class="about__line services__line"></div>
                <div class="services__grid-cards">
                    <div class="services__grid-card">
                        <img src="img/services__project.png" alt="" class="services__cards-logo">
                        <div class="services__card-text-wrapper">
                            <h5 class="services__cards-h4 text__uppercase">Project and construction management</h5>
                            <p class="services__cards-p">Lorem ipsum dolor sit amet, consectetuer 
                            adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                            dolore magna aliquam erat.</p>
                        </div>
                    </div>
                    <div class="services__grid-card">
                        <img src="img/services__structure.png" alt="" class="services__cards-logo">
                        <div class="services__card-text-wrapper">
                            <h5 class="services__cards-h4 text__uppercase">Structure audit and maintenance</h5>
                            <p class="services__cards-p">Lorem ipsum dolor sit amet, consectetuer 
                            adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                            dolore magna aliquam erat.</p>
                        </div>
                    </div>
                    <div class="services__grid-card">
                        <img src="img/services__factory.png" alt="" class="services__cards-logo">
                        <div class="services__card-text-wrapper">
                            <h5 class="services__cards-h4 text__uppercase">Factory construction and modeling</h5>
                            <p class="services__cards-p">Lorem ipsum dolor sit amet, consectetuer 
                            adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
                            dolore magna aliquam erat.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="get-in-touch">
        <div class="container">
            <div class="get-in-touch__wrapper">
                <h2 class="get-in-touch__h2">Want to build something amazing?</h2>
                <div class="get-in-touch__btn-wrapper"><button class="get-in-touch__btn services__btn text__uppercase">Get in touch</button></div>
            </div>
        </div>
    </section>

    <section class="newsletter">
        <div class="container">
            <div class="newsletter__flex-elements">
                <div class="newsletter__flex-element">
                    <h3 class="newsletter__h3">Newsletter Signup</h3>
                </div>
                <div class="newsletter__flex-element">
                    <input type="text" placeholder="test@youremail.com" class="newsletter__input">
                    <div class="newsletter__btn-wrapper"><button class="newsletter__btn services__btn text__uppercase">Sign Up</button></div>
                </div>
            </div>
        </div>
    </section>

    <section class="footer">
        <div class="container">
            <div class="footer__grid">
                <div class="footer__grid-item">
                    <h5 class="footer__h5 footer__h5-logo text__uppercase">Company</h5>
                    <img class="footer__img white-logo" src="img/company-logo-white.png" alt="Logo" >
                    <p class="footer__p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
                </div>
                <div class="footer__grid-item">
                    <h5 class="footer__h5 footer__h5-inner text__uppercase">Links</h5>
                    <div class="footer-item-grid">
                        <div class="footer-item-grid__inner">
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Home</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">About</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Services</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Projects</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Contact Us</h5>
                        </div>
                        <div class="footer-item-grid__inner">
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">FAQ</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Terms</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Careers</h5>
                        </div>
                        <div class="footer-item-grid__inner">
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Blog</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">Partners</h5>
                            <h5 class="footer__h5 footer__h5-text footer__h5-text-grid text__uppercase">News</h5>
                        </div>
                    </div>    
                </div>
                <div class="footer__grid-item">
                    <div class="footer__grid-icon">
                        <div class="footer__grid-icon-left">
                            <h5 class="footer__h5 footer__h5-inner text__uppercase">Contact us</h5>
                            <h5 class="footer__h5 footer__h5-adres">213 Baker Street Oriel City Kounty 7000 KNW,<br>Kountry Name</h5>
                            <h5 class="footer__h5 footer__h5-number">+23 994 233 4022</h5>
                            <h5 class="footer__h5 footer__h5-email">info@konstruct.com</h5>
                        </div>
                        <div class="footer__grid-icon-right">
                            <div class="footer__icon">
                                <img class="footer__icon-img" src="img/socials.png" alt="Icon">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="copyright">
        <div class="container">
            <div class="copyright__text-p">© 2017 Konstruct Inc. Designed by Jane Kathryn Teo</div>
        </div>
    </footer>

</body>
</html>